/* 数据格式演示
 var aqiSourceData = {
 "北京": {
 "2016-01-01": 10,
 "2016-01-02": 10,
 "2016-01-03": 10,
 "2016-01-04": 10
 }
 };
 */

// 以下两个函数用于随机模拟生成测试数据
function getDateStr(dat) {
    var y = dat.getFullYear();
    var m = dat.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = dat.getDate();
    d = d < 10 ? '0' + d : d;
    return y + '-' + m + '-' + d;
}
function randomBuildData(seed) {
    var returnData = {};
    var dat = new Date("2016-01-01");
    var datStr = ''
    for (var i = 1; i < 92; i++) {
        datStr = getDateStr(dat);
        returnData[datStr] = Math.ceil(Math.random() * seed);
        dat.setDate(dat.getDate() + 1);
    }
    return returnData;
}

var aqiSourceData = {
    "北京": randomBuildData(500),
    "上海": randomBuildData(300),
    "广州": randomBuildData(200),
    "深圳": randomBuildData(100),
    "成都": randomBuildData(300),
    "西安": randomBuildData(500),
    "福州": randomBuildData(100),
    "厦门": randomBuildData(100),
    "沈阳": randomBuildData(500)
};

var ruler = {
    day : 10,
    week : 20,
    month : 30
}

// 用于渲染图表的数据
var chartData = {};

// 记录当前页面的表单选项
var pageState = {
    nowSelectCity: -1,
    nowGraTime: "day"
}

function getRandomColor(){
    return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
}

/**
 * 渲染图表
 */
function renderChart() {

    //chartData = aqiSourceData;
    var container = document.getElementById('aqi-chart-wrap');
    container.innerHTML = "";
    for(var i in chartData){
        var height = chartData[i];
        var item = document.createElement("div");
        item.setAttribute("class","item");
        item.style.backgroundColor = getRandomColor();
        item.style.height = height;
        item.style.width = ruler[pageState.nowGraTime];
        item.setAttribute("title",height);
        container.appendChild(item);
    }

}

/**
 * 日、周、月的radio事件点击时的处理函数
 */
function graTimeChange() {
    // 确定是否选项发生了变化
    if(this.value != pageState.nowGraTime){
        // 设置对应数据
        pageState.nowGraTime = this.value;
        // 调用图表渲染函数
        initAqiChartData();
    }


}

/**
 * select发生变化时的处理函数
 */
function citySelectChange() {
    // 确定是否选项发生了变化
    if(this.value != pageState.nowSelectCity){
        // 设置对应数据
        pageState.nowSelectCity = this.value;
        // 调用图表渲染函数
        initAqiChartData();
    }

}

/**
 * 初始化日、周、月的radio事件，当点击时，调用函数graTimeChange
 */
function initGraTimeForm() {
    var radio = document.getElementsByName("gra-time");
    var time = document.querySelector('[name="gra-time"]:checked').value;
    pageState.nowGraTime = time;
    for(var i=0;i<radio.length;i++){
        radio[i].onclick = graTimeChange;
    }
}

/**
 * 初始化城市Select下拉选择框中的选项
 */
function initCitySelector() {
    // 读取aqiSourceData中的城市，然后设置id为city-select的下拉列表中的选项
    var select = document.getElementById("city-select");
    select.innerHTML = "";
    for(var name in aqiSourceData){
        var option = document.createElement("option");
        option.innerHTML = name;
        option.value = name;
        select.appendChild(option);
    }
    var city = select.value;
    pageState.nowSelectCity = city;
    // 给select设置事件，当选项发生变化时调用函数citySelectChange
    select.onchange = citySelectChange;
}

/**
 * 初始化图表需要的数据格式
 */
function initAqiChartData() {

    // 将原始的源数据处理成图表需要的数据格式
    // 处理好的数据存到 chartData 中
    var time = pageState.nowGraTime;
    var city = pageState.nowSelectCity;
    for(var name in aqiSourceData){
        if(name == city){
            chartData = aqiSourceData[name];
        }
    }
    if(time == "week"){
        var weekData = {};
        var i = 0;
        var count = 0;
        var sum = 0;
        for(var name in chartData){
            count++;
            sum+=chartData[name];
            if(count==7){
                weekData[i] = Math.floor(sum/count);
                count = 0;
                sum = 0;
                i++;
            }
        }
        if(count !=0){
            weekData[i] = Math.floor(sum/count);
        }
        chartData = weekData;
    }
    if(time == "month"){
        var monthData = {};
        var i = 0;
        var count = 0;
        var sum = 0;
        for(var name in chartData){
            count++;
            sum+=chartData[name];
            if(count==30){
                monthData[i] = Math.floor(sum/count);
                count = 0;
                sum = 0;
                i++;
            }
        }
        chartData = monthData;
    }
    renderChart();

}

/**
 * 初始化函数
 */
function init() {

    initGraTimeForm();
    initCitySelector();
    initAqiChartData();
    //renderChart();


}
window.onload = function () {
    init();
}
